<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>退换货申请</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <link rel="stylesheet" href="css/ChangeGoodsApply.css">
</head>
<body>
<!-- 最上方logo -->
<div id="app">
    <div id="top">
        <div id="logo">
            <p>
                <span>禧创OCP</span>
            </p>
            <p>
                <span>全渠道数字平台</span>
            </p>
        </div>
        <div id="exit">
            <!-- 下拉菜单 -->
            <el-dropdown>
                <span class="el-dropdown-link" style="color: white;">
                  <i class="el-icon-user-solid">admin</i>
                </span>
                <!-- 后续连数据库 -->
                <el-dropdown-menu trigger="click">
                    <el-dropdown-item>水热事业部</el-dropdown-item>
                    <el-dropdown-item>厨电事业部</el-dropdown-item>
                    <el-dropdown-item>热能事业部</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            &nbsp;
            <i class="el-icon-switch-button" style="color: white;"></i>
        </div>
    </div>
    <!-- 上方导航栏 -->
    <div id="nav">
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1"><a href="ChangeGoodsApply.html">退换货申请</a></el-menu-item>
            <el-menu-item index="2"><a href="exchange.html">退换货订单列表</a></el-menu-item>
        </el-menu>
    </div>
    <!--申请标题-->
    <div id="nav1">
        <p>上海禧创燃气具有限公司退换货申请</p>
    </div>

    <div id="sub1">
        <!--获取客户名称等信息-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="客户名称：">
                <el-input v-model="formInline.username" placeholder="请输入客户名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="客户编码：">
                <el-input v-model="formInline.number" placeholder="请输入客户编码" clearable></el-input>
            </el-form-item>
            <el-form-item label="原销售订单号：">
                <el-select  placeholder="订单号" @click="dialogFormVisible = true"></el-select>
            </el-form-item>
            <!--原销售订单弹框-->
            <el-dialog title="选择退货订单" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="活动名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </el-form>
    </div>

    <div id="sub2">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="区域：">
                <el-input v-model="formInline.region" placeholder="请输入区域" clearable></el-input>
            </el-form-item>
            <el-form-item label="退货方式：">
                <el-select v-model="formInline.method" placeholder="请选择退货方式">
                    <el-option label="客户寄件" value="send"></el-option>
                    <el-option label="上门取件" value="take"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单类型：">
                <el-select v-model="formInline.type" placeholder="请选择订单类型">
                    <el-option label="退货" value="return"></el-option>
                    <el-option label="换货" value="change"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>

    <div id="sub3">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="快递单号：">
                <el-select v-model="formInline.type1" placeholder="请选择快递类型">
                    <el-option label="申通" value="STO"></el-option>
                    <el-option label="中通" value="ZTO"></el-option>
                    <el-option label="邮政" value="EMS"></el-option>
                    <el-option label="圆通" value="YTO"></el-option>
                    <el-option label="顺丰" value="SF"></el-option>
                </el-select>
                <el-input v-model="formInline.number1" style="width:140px" placeholder="请输入快递单号" clearable></el-input>
            </el-form-item>
            <el-form-item label="原发货仓库名称：">
                <el-select v-model="formInline.warehouse" placeholder="请选择原发货仓库名称"></el-select>
            </el-form-item>
            <el-form-item label="退回仓库：">
                <el-select v-model="formInline.returnhouse" placeholder="请选择退回仓库"></el-select>
            </el-form-item>
        </el-form>
    </div>

    <div id="sub4">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="客户备注：">
                <el-input
                        type="text"
                        placeholder="请输入内容"
                        v-model="text"
                        maxlength="100"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
            <el-form-item label="退款原因：">
                <el-select v-model="formInline.reasons" placeholder="请输入退款原因...">
                    <el-option label="七天无理由退换货（不想要）" value="bxy"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="其他原因：">
                <el-input v-model="formInline.otreasons" placeholder="请输入..."></el-input>
            </el-form-item>
        </el-form>
    </div>

    <!--表格-->
    <div id="table">
        <el-table :data="tableData" border style="border:1px solid darkgrey" size="mini" :fit="true"
                  :header-cell-style="{background:'darkgray',color:'#fff'}">
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="oldSale" label="原销售订单号" align="center"></el-table-column>
            <el-table-column prop="sourceSale" label="原销售单来源单号" align="center"></el-table-column>
            <el-table-column prop="coding" label="产品编码" align="center"></el-table-column>
            <el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
            <el-table-column prop="amount" label="数量（件）" align="center"></el-table-column>
            <el-table-column prop="return" label="可退数量（件）" align="center"></el-table-column>
            <el-table-column prop="price" label="开票价（元）" align="center"></el-table-column>
            <el-table-column prop="money" label="退货金额（元）" align="center"></el-table-column>
            <el-table-column prop="handle" label="操作" align="center">
                <el-button type="danger" @click="deleted" size="small">删除</el-button>
            </el-table-column>
        </el-table>
    </div>

    <!--提交按钮-->
    <div id="foot">
        <el-row>
            <el-button type="primary">提交</el-button>
            <el-button>保存至退货订单列表</el-button>
        </el-row>
    </div>

    <!-- 侧边导航栏 -->
    <div id="left">
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#989494"
                text-color="white"
        >
            <el-submenu index="1">
                <template slot="title">
                    <span>订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1">提交订单</el-menu-item>
                    <el-menu-item index="1-2">待处理订单</el-menu-item>
                    <el-menu-item index="1-3">采购订单</el-menu-item>
                    <el-menu-item index="1-4">零售订单列表</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <span>售后管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="2-1"><a href="ChangeGoodsApply.html">退换货申请</a></el-menu-item>
                    <el-menu-item index="2-2"><a href="exchange.html">退换货订单列表</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <span>产品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">产品信息查询</el-menu-item>
                    <el-menu-item index="3-2">库存信息管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <span>会员信息</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="4-1"><a href="information.html">会员信息</a></el-menu-item>
                    <el-menu-item index="4-2"><a href="motifyPass.html">修改密码</a></el-menu-item>
                    <el-menu-item index="4-3"><a href="AccountMeaasge.html">账号信息</a></el-menu-item>
                    <el-menu-item index="4-4"><a href="subAccount.html">子账号管理</a></el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                    <span>设置</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="5-1">网店设置</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</div>
</body>
<script type="module">
    let vm=new Vue({
        el:'#app',
        data(){
            return{
                activeIndex2: '1',

                formInline: {
                    username: '',
                    number: '',
                    region:'',
                    method:'',
                    type:'',
                    type1:'',
                    number1:'',
                    warehouse:'',
                    returnhouse:'',
                    reasons:'',
                    otreasons:''
                },
                text:'',

                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',

                tableData:[{},{},{}]
            };
        },
        methods:{
            //删除信息
            deleted() {
                this.$confirm('您确定要删除该申请吗?', '删除提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //表格最下方一栏的合计
            // getSummaries(param) {
            //     const { columns, data } = param;
            //     const sums = [];
            //     columns.forEach((column, index) => {
            //         if (index === 0) {
            //             sums[index] = '订单合计';
            //             return;
            //         }
            //         const values = data.map(item => Number(item[column.property]));
            //         if (!values.every(value => isNaN(value))) {
            //             sums[index] = values.reduce((prev, curr) => {
            //                 const value = Number(curr);
            //                 if (!isNaN(value)) {
            //                     return prev + curr;
            //                 } else {
            //                     return prev;
            //                 }
            //             }, 0);
            //             sums[index] += ' 元';
            //         } else {
            //             sums[index] = 'N/A';
            //         }
            //     });
            //
            //     return sums;
            // },

            handleOpen(key,keyPath){
                console.log(key,keyPath);
            },
            handleClose(key,keyPath){
                console.log(key,keyPath);
            },
            handleSelect(key,keyPath){
                console.log(key,keyPath);
            },
        },
    });
</script>
</html>
